<template>
	<view class="money">
		<u-sticky>
			<view class="order-top">
				<view @click="show=true">{{labelText}}</view>
				<view style="margin-left: 6rpx;margin-top: 6rpx;" @click="show=true">
					<u-icon v-if="show" name="arrow-up-fill" color="#005d98" size="26rpx"></u-icon>
					<u-icon v-else name="arrow-down-fill" color="#005d98" size="26rpx"></u-icon>
				</view>
				<image src="/static/rl.png" style="width: 30rpx;height: 30rpx;margin-left: auto;"></image>
				<view style="margin-left: 10rpx;">2025/07/02 - 2025/08/02</view>

			</view>
		</u-sticky>
		<view class="order-list">
			<view class="money-title money-text" style="margin-top: 0;">
				起止时间：2025/07/02 - 2025/08/02
			</view>
			<view class="money-tag">
				<view class="money-item">
					<view>订单总计</view>
					<view class="money-text" style="font-size: 42rpx;">24</view>
				</view>
				<view class="money-item">
					<view>费用总计</view>
					<view class="money-text"><text style="font-size: 42rpx;">96.5</text>元</view>
				</view>
				<view class="money-item">
					<view>时长总计</view>
					<view class="money-text"><text style="font-size: 42rpx;">319</text>分钟</view>
				</view>
			</view>
		</view>
		<u-picker :show="show" :columns="timeList" @close="show=false" @cancel="show=false" @confirm="confirm"
			:defaultIndex="[0]" keyName="label"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				labelText: '最近30天',
				timeList: [
					[{
							label: '最近30天',
							val: 30
						},
						{
							label: '最近60天',
							val: 60
						},
						{
							label: '最近1年',
							val: 365
						}
					]
				]
			}
		},
		methods: {
			confirm(val) {
				console.log(val.value[0]);
				this.labelText = val.value[0].label
				this.show = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.money {
		display: flex;
		align-items: center;
		flex-direction: column;
		padding-bottom: calc(env(safe-area-inset-bottom) / 2 + 30rpx);

	}

	.order-list {
		margin-top: 31rpx;
		width: 710rpx;
		background: #FFF;
		padding: 31rpx;
		border-radius: 29rpx;
		font-size: 27rpx;
		color: #999;
	}

	.money-text {
		font-weight: 600;
		font-size: 31rpx;
		color: #000;
		margin-top: 10rpx;
	}

	.money-title {
		padding-bottom: 31rpx;
		border-bottom: 1px dashed #ececec;
	}

	.order-top {
		width: 100vw;
		height: 90rpx;
		display: flex;
		align-items: center;
		background: #ffffff;
		color: #999;
		font-size: 31rpx;
		padding: 0 20rpx;
	}

	.money-tag {
		display: flex;
		justify-content: space-between;
		margin-top: 31rpx;
	}

	.money-item {
		display: flex;
		align-items: center;
		flex-direction: column;
	}
</style>